<template>
  <div class="content-manage">
    <!-- 搜索行 -->
    <slot v-if="$slots.searchbox" name="searchbox"></slot>
    <div v-if="$slots.elsebox" ref="elsebox" class="elsebox">
      <slot name="elsebox"></slot>
    </div>
    <!-- 添加删除公用组件使用 -->
    <slot v-if="$slots.btnsBar" name="btnsBar"></slot>
    <div ref="commonLayout" class="common-layout">
      <!-- 主要区域 -->
      <div class="content">
        <!-- 其他内容 -->
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
  },
  data () {
    return {
      screenHeight: document.body.clientHeight
    };
  },
  watch: {
    screenHeight (val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val;
        this.timer = true;
        let that = this;
        // that.calculateHeight()
        setTimeout(function () {
          // 打印screenWidth变化的值
          that.calculateHeight();
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted () {
    const that = this;
    window.onresize = () => {
      return (() => {
        that.screenHeight = document.body.clientHeight;
      })();
    };
    this.calculateHeight();
  },
  methods: {
    calculateHeight () {
      let parent = this.$refs.commonLayout;
      parent.style.setProperty("height", "100%");
      // 获取元素实际需要占据的高度
      let height = parent.offsetHeight;
      let searchbox = this.$slots.searchbox;
      if (searchbox) {
        height = height - 50;
      }
      let btnsBar = this.$slots.btnsBar;
      if (btnsBar) {
        height = height - 60;
      }
      let elsebox = this.$slots.elsebox;
      if (elsebox) {
        height = height - 100;
      }
      parent.style.setProperty("height", height + "px");
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/styles/variables.scss";
@import "~@/styles/index.scss";

.content-manage {
  width: 100%;
  height: 100%;
  border: 1px solid $borderColorBox;
  padding: 15px;
  overflow-y: auto;
  overflow-x: hidden;

  .common-layout {
    width: 100%;
    height: calc(100% - #{$actionBarHeight});
    padding: 0 0 10px;
    position: relative;

    .content {
      width: 100%;
      height: 100%;
      position: relative;

      .pagination {
        position: absolute;
        right: 0px;
        bottom: 0px;
      }
    }
  }
}

// 弹出框  统一样式
::v-deep .el-dialog__wrapper {
  background-color: rgba(124, 143, 143, .6);

  .el-dialog {
    background-color: rgba(240, 243, 247, 1);
    width: 55%;
    border: #000 1px solid;
    border-radius: 9px;
    overflow: hidden;
    color: #000;

    .el-dialog__header {
      width: 100%;
      background-color: #237FC3;
      padding: 15px;

      .el-dialog__title {
        font-weight: 700;
      }

      .el-dialog__close {
        font-size: 22px;
        color: #fff;
        font-weight: 700;
      }
    }

    .el-dialog__body {
      overflow: hidden;

      // overflow-y: auto;
      .el-input__inner {
        color: #000;
        border-color: rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
      }

      .el-textarea__inner {
        color: #000;
        border-color: rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
      }

      .el-form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .total-price {
          color: #000;
        }

        .el-row {
          width: 100%;
          margin-bottom: 10px;

          .el-table {
            max-height: 200px;
            overflow-y: auto;
            background-color: rgba(255, 255, 255, 1);

            .cell {
              color: #000;
            }

            th {
              background-color: rgba(230, 230, 230, 1);
            }

            th.is-leaf {
              border-color: rgba(77, 77, 77, 1);
            }

            td {
              border-color: rgba(77, 77, 77, 1);
            }

            tr:hover {
              background-color: rgba(77, 77, 77, 1);
            }

            .el-table__empty-text {
              color: #000;
            }

            .current-row {
              background-color: #dbdbdb !important;
            }

            .el-table__row--striped {
              background-color: rgba(255, 255, 255, 1);
            }
          }

          .el-table--border {
            border-color: rgba(77, 77, 77, 1);
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
          }

          .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: rgb(177, 177, 177);
          }

          .el-table__body tr.current-row>td {
            background-color: #dbdbdb !important;
          }

          .el-form {
            .el-form-item {
              margin-bottom: 0 !important;
            }

            .el-form-item__content {
              display: flex;
              width: 100%;

              .el-select {
                min-width: 15%;
              }

              .el-input {
                min-width: 10%;
              }

              .el-input__inner {
                border-right: none;
              }

              .el-button {
                min-width: 5%;
                margin-left: 10px;
              }
            }
          }
        }

        .el-form-item {
          display: flex;

          .el-form-item__label {
            line-height: 36px;
            min-width: 140px;
            text-align: end;
          }

          .el-form-item__content {
            line-height: 36px;
            width: 100%;
            display: flex;
          }
        }
      }
    }

    .el-dialog__footer {
      width: 100%;
      border-top: 1px solid rgba(191, 191, 191, 1);
      position: inherit;
      text-align: right;
      padding: 15px;
    }

    .el-form-item__label {
      color: #000;
      font-weight: 400;
      font-size: 16px;
    }
  }
}

.spec-content {
  padding: 0 !important;
}

::v-deep .el-table {
  position: absolute;
  width: 100%;
}</style>
